<template>
  <div class='container'>
    <el-card>
      <!-- 筛选表单区域 -->
      <div class="flex-box">
        <el-form label-width="80px"
                 inline
                 size="small">
          <el-form-item label="学科名称">
            <el-input v-model="query.subjectName"
                      clearable
                      placeholder="根据学科名称搜索"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onCancel">清除</el-button>
            <el-button type="primary"
                       @click="onSeach">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-button type="success"
                   size="small"
                   icon="el-icon-edit"
                   @click="changeState">新增学科</el-button>
      </div>
      <el-alert :title="`总共${total}条数据`"
                type="info"
                effect="light"
                show-icon
                closable></el-alert>

      <!-- 表单区域 -->
      <el-table :data="subjectsList"
                border>
        <el-table-column type="index"
                         label="序号"
                         width="60">
        </el-table-column>
        <el-table-column prop="subjectName"
                         label="学科名称">
        </el-table-column>
        <el-table-column prop="username"
                         label="创建者">
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建日期"
                         width="180">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay"
                         label="前台是否显示">
          <template slot-scope="scope">
            {{scope.row.isFrontDisplay===1?'是':'否'}}
          </template>

        </el-table-column>
        <el-table-column prop="username"
                         label="二级目录">
        </el-table-column>
        <el-table-column prop="tags"
                         label="标签">
        </el-table-column>
        <el-table-column prop="totals"
                         label="题目数量">
        </el-table-column>

        <el-table-column label="操作"
                         width="240">
          <template slot-scope="scope">
            <!-- 学科分类 -->
            <el-button type="text"
                       size="small"
                       @click="huoqu(scope)">学科分类</el-button>
            <!-- 学科标签 -->
            <el-button type="text"
                       size="small"
                       @click="$router.push('/subjects/tags')">学科标签</el-button>
            <!-- 修改 -->
            <el-button type="text"
                       size="small"
                       @click="editArticle(scope.row.id)">修改</el-button>
            <!-- 删除 -->
            <el-button type="text"
                       size="small"
                       @click="delArticle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <page-tool @pageChange="pageChange"
                 :total="total"
                 @pageSizeChange="pageSizeChange" />
      <!-- 分页区域 -->
      <!-- 弹框 -->
      <subjects-add ref="xueke"
                    :isEdit="isEdit"
                    @close="$refs.xueke.addVisible = false"
                    @addSub="subj"
                    @editAstr="editA"
                    @anniu="guanbi" />
      <!-- 弹框 -->

    </el-card>
  </div>
</template>

<script>
import { list, remove, detail } from '@/api/hmmm/subjects'
import SubjectsAdd from '@/module-hmmm/components/subjects-add'
import PageTool from '@/module-dashboard/components/pageTool'
export default {
  name: 'Subjects',
  components: {
    SubjectsAdd,
    PageTool
  },
  data() {
    return {
      subjectsList: [],
      query: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      total: 0,
      isEdit: true
    }
  },
  methods: {
    // 获取文章数据
    getSubjectsList() {
      list({
        subjectName: this.query.subjectName,
        page: this.query.page,
        pagesize: this.query.pagesize
      }).then((data) => {
        this.subjectsList = data.data.items
        this.total = data.data.counts
        console.log(data)
      })
    },
    pageChange(page) {
      this.query.page = page
      this.getSubjectsList()
    }, // 监听每页数变化
    pageSizeChange(pagesize) {
      this.query.pagesize = pagesize

      this.getSubjectsList()
    },

    // 搜索按钮
    onSeach() {
      this.query.page = 1
      this.getSubjectsList()
    },
    // 取消按钮
    onCancel() {
      this.query.page = 1
      this.query.subjectName = ''
      this.getSubjectsList()
    },
    // 删除
    delArticle(id) {
      this.$confirm('此操作将永久删除该学科 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          remove({ id }).then(() => {
            this.$message.success('成功删除了学科' + '!')
            this.subjectsList.splice(id)
            this.getSubjectsList()
          })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 新增学科
    subj() {
      this.getSubjectsList()
    },
    // 获取回显数据
    editArticle(id) {
      detail(id).then((data) => {
        console.log(data.data)
        this.$refs.xueke.subjectForm = data.data

        this.$refs.xueke.value = data.data.isFrontDisplay
        console.log(this.$refs.xueke.subjectForm)
        this.$refs.xueke.addVisible = true
        this.$refs.xueke.changeColor = true

        this.isEdit = false
      })
    },
    changeState() {
      this.$refs.xueke.addVisible = true
      this.isEdit = true
      this.$refs.xueke.changeColor = true
    },
    // 修改学科
    editA() {
      this.getSubjectsList()
    },
    //打开弹层
    addxueke() {
      this.addVisible = true
    },

    //关闭弹层
    guanbi() {
      this.$refs.xueke.subjectForm = {
        subjectName: '',
        isFrontDisplay: ''
      }
    },
    //获取学科目录
    huoqu(scope) {
      this.$router.push('/subjects/directorys')
      console.log(scope)
      console.log(scope.row)
    }
  },
  created() {
    this.getSubjectsList()
  }
}
</script>

<style scoped>
.container {
  padding: 10px;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
